<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<!--
    a标签:超链接标签
        通过超链接标签可以实现页面的跳转
        页面的跳转可以是跳转到当前服务器的另一个页面中
        也可以跳转到另一台服务器中的页面
        还能跳转到当前页面的某一个位置
    href属性:指定超链接跳转的URL地址
    一个完整的URL地址由下面几部分组成
    协议名://域名:端口/应用名/访问资源的命令[请求参数]
    协议名
        通信协议
        常见的协议:ftp、https、file、http
    域名
        主机名,在开发过程中,一般使用的是服务器的ip地址
        例如:192.168.7.8
    端口号
        应用程序的通信端口
        通信端口的范围:0-65535
    在超链接中使用时,存在三种情况
    1.服务器内部跳转
        可以使用相对路径来表示
        不需要编写完整的url地址
    2.跨域跳转
        必须使用完整的URL地址
    3.锚链接
        跳转到当前页面的某一个位置
        此时的页面是没有产生变化的
        访问页面时,默认展示的页面的头部内容
        如果需要访问当前页面的某一个位置的资源
        在对应资源上添加一个id属性,id属性值在同一个页面中是不能重复的
        此时href属性的值的格式:#id属性值
        表示跳转到对应id属性值所在的资源位置
-->
<a id="top" href="01-第一个HTML文档.html">服务器内部跳转</a><br>
<a href="https://www.baidu.com/">跨域跳转</a><br>
<a href="#music">锚链接</a><br>
<a href="#bottom">回到底部</a>
<hr>
<h2>您最喜欢的综艺节目</h2>
<ul type="disc">
    <li>极限挑战</li>
    <li>男生女生向前冲</li>
    <li>非唱勿扰</li>
    <li>脱口秀</li>
</ul>
<h2 id="music">您最喜欢的歌曲</h2>
<ul type="square">
    <li>酒醉的蝴蝶</li>
    <li>最炫名族风</li>
    <li>小苹果</li>
    <li>自由飞翔</li>
</ul>
<h2>您最喜欢的电影</h2>
<ul type="circle">
    <li>我和我的祖国</li>
    <li>战狼</li>
    <li>西虹市首富</li>
    <li>大话西游</li>
</ul>
<h2>您最喜欢的电视剧</h2>
<ul type="none">
    <li>亮剑</li>
    <li>西游记</li>
    <li>三国演义</li>
    <li>水浒传</li>
    <li>甄嬛传</li>
    <li>红楼梦</li>
</ul>

<h2 >您最喜欢的综艺节目</h2>
<ul type="disc">
    <li>极限挑战</li>
    <li>男生女生向前冲</li>
    <li>非唱勿扰</li>
    <li>脱口秀</li>
</ul>
<h2>您最喜欢的歌曲</h2>
<ul type="square">
    <li>酒醉的蝴蝶</li>
    <li>最炫名族风</li>
    <li>小苹果</li>
    <li>自由飞翔</li>
</ul>
<h2>您最喜欢的电影</h2>
<ul type="circle">
    <li>我和我的祖国</li>
    <li>战狼</li>
    <li>西虹市首富</li>
    <li>大话西游</li>
</ul>
<h2>您最喜欢的电视剧</h2>
<ul type="none">
    <li>亮剑</li>
    <li>西游记</li>
    <li>三国演义</li>
    <li>水浒传</li>
    <li>甄嬛传</li>
    <li>红楼梦</li>
</ul>
<h2>您最喜欢的综艺节目</h2>
<ul type="disc">
    <li>极限挑战</li>
    <li>男生女生向前冲</li>
    <li>非唱勿扰</li>
    <li>脱口秀</li>
</ul>
<h2>您最喜欢的歌曲</h2>
<ul type="square">
    <li>酒醉的蝴蝶</li>
    <li>最炫名族风</li>
    <li>小苹果</li>
    <li>自由飞翔</li>
</ul>
<h2>您最喜欢的电影</h2>
<ul type="circle">
    <li>我和我的祖国</li>
    <li>战狼</li>
    <li>西虹市首富</li>
    <li>大话西游</li>
</ul>
<h2>您最喜欢的电视剧</h2>
<ul type="none">
    <li>亮剑</li>
    <li>西游记</li>
    <li>三国演义</li>
    <li>水浒传</li>
    <li>甄嬛传</li>
    <li>红楼梦</li>
</ul>
<h2>您最喜欢的综艺节目</h2>
<ul type="disc">
    <li>极限挑战</li>
    <li>男生女生向前冲</li>
    <li>非唱勿扰</li>
    <li>脱口秀</li>
</ul>
<h2>您最喜欢的歌曲</h2>
<ul type="square">
    <li>酒醉的蝴蝶</li>
    <li>最炫名族风</li>
    <li>小苹果</li>
    <li>自由飞翔</li>
</ul>
<h2>您最喜欢的电影</h2>
<ul type="circle">
    <li>我和我的祖国</li>
    <li>战狼</li>
    <li>西虹市首富</li>
    <li>大话西游</li>
</ul>
<h2>您最喜欢的电视剧</h2>
<ul type="none">
    <li>亮剑</li>
    <li>西游记</li>
    <li>三国演义</li>
    <li>水浒传</li>
    <li>甄嬛传</li>
    <li>红楼梦</li>
</ul>
<div id="bottom" style="background-color: red;">
    <a href="#top">回到顶部</a>
</div>
</body>
</html>